<!-- UploadFiles.vue -->
<template>
  <el-upload v-model:file-list="fileList" ref="uploadRef" action="/api/task/setTaskFiles2" multiple :data="data"
    :on-success='handleUploadSuccess' :auto-upload="false">
    <el-button size="default" :disable="btnDisabled && !$store.state.user.is_teacher" type="primary">
      <span v-if="$store.state.user.is_teacher"> 上传文件</span>
      <span v-else> 提交文件</span>
    </el-button>
    <template #tip>
      <div class="el-upload__tip">
        <span> 上传pdf/word/zip/ipynb等格式文件</span>
      </div>
    </template>
  </el-upload>
</template>

<script lang="ts">
import { ref, watch, onMounted } from 'vue';
import {  ElMessage } from 'element-plus';
import { useStore } from 'vuex';
import type { UploadInstance, UploadProps, UploadUserFile } from 'element-plus'
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';
export default defineComponent({
  name: 'UploadFiles',
  props: {
    existingFiles: {
      type: Array,
      default: [],
    },
    saveSuccessed: {
      type: Boolean,
      default: false,
    },
    btnDisabled: {
      type: Boolean,
      default: false,
    },
    is_editing: {
      type: Boolean,
      default: false,
    },

  },
  emits: ['update:fileList', 'update:stuFileList', 'update:is_editing'],
  setup(props, { emit }) {
    const router = useRouter();
    const handleUploadSuccess: UploadProps['onSuccess'] = (
      response,
      uploadFile
    ) => {
      // imageUrl.value = URL.createObjectURL(uploadFile.raw!)
      fileCounts.value = fileCounts.value - 1;
      if (fileCounts.value === 0) {
        ElMessage.success('上传成功')
        if (history.state.current === "/teacher/createTask")
          router.replace({ path: '/teacher/courseDetail', state: { reload: true } });
        else
          location.reload()
      }
    }
    const fileCounts = ref(0)
    const uploadRef = ref<UploadInstance>()
    const data = ref({
      course_id: history.state.course_id,
      task_id: history.state.task_id,
      task_type: history.state.task_type,
    })
    // 定义 fileList
    const fileList = ref<UploadUserFile[]>([]);
    const store = useStore();
    const btnDisabled = ref(false);
    const childMethod = (params: any) => {
      data.value.task_id = params.task_id;
      data.value.task_type = params.task_type;
      data.value.course_id = params.course_id;
      fileCounts.value = fileList.value.length;
      console.log('子组件的方法被调用了，上传文件');
      submitUpload()

    }

    // 监听 fileList 的变化，将其传回给父组件
    watch(fileList, (newValue) => {

      if (store.state.user.is_teacher)
        emit('update:fileList', fileList.value);
      else
        emit('update:stuFileList', fileList.value);

      if (fileList.value.length > 0 && props.saveSuccessed) {
        fileList.value = [];
      }

    });
    onMounted(() => {
      btnDisabled.value = props.btnDisabled;
    })
    const submitUpload = () => {
      uploadRef.value!.submit()
    }
    return {
      fileList,
      data,
      uploadRef,
      store,
      btnDisabled,
      childMethod,
      props,
      submitUpload,
      handleUploadSuccess,
    }
  }
})

</script>
